<script>
export default {
  name: "index",
  data() {
    return {
      detail: '',
      carNum: 0
    }
  },
  onLoad({ id }) {
    this.$api.newsDetail(id).then(res => {
      this.detail = {
        ...res,
        image: this.$baseUrl + res.image,
        content: res.content.replace('"/public/uploads/file/', `"${this.$baseUrl}/public/uploads/file/`)
      }
      console.log(this.detail)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    toCar() {
      this.$u.route({
        url: '/pages/car/car',
        type: 'switchTab'
      })
    },
    addCar() {
      const carList = uni.getStorageSync('carList') || []
      const index = carList.findIndex(item => item.goods_id === this.detail.id)
      if (index > -1) {
        carList[index].count++
      } else {
        carList.push({
          goods_id: this.detail.id,
          count: 1,
          buyChecked: false,
          deleteChecked: false,
        })
      }
      this.carNum = carList.length
      uni.setStorageSync('carList', carList)
      // this.$api.addCar({
      //   goods_id: this.detail.id,
      //   count: 1
      // }).then(res => {
      //   this.$u.toast('加入购物车成功')
      // }).catch(err => {
      //   console.log(err)
      // })
    },
    buy() {
      uni.setStorageSync('buyList', [{
        ...this.detail,
        count: 1
      }])
      this.$u.route('/pages/createOrder/createOrder')
    }
  }
}
</script>

<template>
<div>
  <div class="detail-image">
    <u-image :src="detail.image" :height="500" mode="aspectFit"></u-image>
  </div>
  <u-line ></u-line>

   <div class="detail-box">
      <view class="demo-title">
        {{detail.name}}
      </view>
      <view class="desc">
        {{detail.desc}}
      </view>
     <u-gap height="20"></u-gap>
     <u-line ></u-line>
     <u-gap height="20"></u-gap>
     <u-section :font-size="36"  :show-line="false" title="介绍" :right="false"></u-section>
     <u-gap height="20"></u-gap>

     <u-line ></u-line>
    </div>

  <div style="padding: 0 20rpx">
    <u-parse :html="detail.content"></u-parse>
  </div>
</div>
</template>

<style scoped lang="scss">
.desc {
  font-size: 24rpx;
  //  两行溢出省略号
  line-height: 30rpx;
  color: $u-tips-color;
  margin-top: 5px;
}

.goods-action {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #FFFFFF;

  .goods-icon {
    position: relative;
    font-size: 28rpx;
    color: #646566;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    img {
      height: 36rpx;
      margin: 0 auto 2px;
    }
  }
  .goods-btn1 {
    width: 100%;
    margin-left: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    background: linear-gradient(to right, #ffd01e, #ff8917);
  }
  .goods-btn2 {
    width: 100%;
    margin-right: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: linear-gradient(to right, #ff6034, #ee0a24);
  }
  .goods-btn3 {
    width: 100%;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    background: #999999;
    box-sizing: border-box;
    margin: 0 20px;
  }

}
.detail-image {
  background-color: #ffffff;
}
.detail-box {
  padding: 20rpx;
  background-color: #ffffff;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 10rpx 14rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 48rpx;
  color: $u-type-error;
  margin-top: 5px;
}
.demo-count {
  font-size: 28rpx;
  color: $u-type-info;
  margin-top: 5px;
}

</style>